<template>
	<div style="width:100%">
		<div class="menu">
			<li><el-link href="/#/data/center" :underline="false"  >数据资产中心</el-link></li>
			<li><el-link href="/#/data/company" :underline="false"  >一企一档</el-link></li>
			<li><el-link href="/#/data/park" :underline="false"  >一园一档</el-link></li>
			<li><el-link href="/#/data/storey" :underline="false"  >一楼一档</el-link></li>
		</div>
		<div  class="table-admin-container" style="margin-top: 2px; display: flex; padding: 10px; margin-bottom: 80px;" >
			<el-row :gutter="10" style="width: 100%;">
                <el-col :span="24" style="height: 100%;">
                        <TableSearch :search="state.tableData.search" @search="onSearch" />
						<div style="width: 100%; background-color: #fff;  padding: 10px; font-size: 16px;">
							<div style="width: 100%;">
								<div style="float: left; padding-left:25px;height: 40px;">功能标签:</div>
								<div style="float: left; padding-left:25px;height: 40px; color:#666">
									孵化器&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
									投资机构&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
									智库机构
								</div>
								<div style="clear: both;"></div>
							</div>
							<div style="width: 100%;">
								<div style="float: left; padding-left:25px;height: 40px;">股市相关标签:</div>
								<div style="float: left; padding-left:25px;height: 40px; color:#666">
									主板&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
									科创板&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
									IPO&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
									上市公司&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
									新三板&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
									A股&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
								</div>
								<div style="clear: both;"></div>
							</div>
							<div style="width: 100%;">
								<div style="float: left; padding-left:25px;height: 40px;">公司类型:</div>
								<div style="float: left; padding-left:25px;height: 40px; color:#666">
									央企&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
									规上企业&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
									高新技术企业&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
									专精特新&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
									外资&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
									龙头企业&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
									军工企业&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
								</div>
								<div style="clear: both;"></div>
							</div>
							<div style="width: 100%;">
								<div style="float: left; padding-left:25px;height: 40px;">排名标签:</div>
								<div style="float: left; padding-left:25px;height: 40px; color:#666">
									世界500强    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
									中国500强&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
									市级民营百强&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
									中国农业百强&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
									外资&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
									龙头企业&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
									军工企业&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
								</div>
								<div style="clear: both;"></div>
							</div>
							<div style="width: 100%;">
								<div style="float: left; padding-left:25px;height: 40px;">投资阶段标签:</div>
								<div style="float: left; padding-left:25px;height: 40px; color:#666">
									独角兽&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
									A轮&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
									B轮&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
									C轮&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
									D轮&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
									战略&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
								</div>
								<div style="clear: both;"></div>
							</div>
							<div style="width: 100%;">
								<div style="float: left; padding-left:25px;height: 40px;">国际化服务:</div>
								<div style="float: left; padding-left:25px;height: 40px; color:#666">
									西亚 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
									东亚（日本、韩国）&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
									港澳台&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
									东南亚&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
								</div>
								<div style="clear: both;"></div>
							</div>
						</div>
                        <Table
                            ref="tableRef"
                            v-bind="state.tableData"
                            class="table-admin"
                            @updateRow="onTableUpdateRow"
                            style="height: 100%;"
                            @add="onTableAddRow"
                            @delRow="onTableDelRow"
                            @batchDel="onTableBatchDel"
                            @pageChange="onTablePageChange"
                            @sortHeader="onSortHeader"
                        />
                        <EditDialog  ref="editRef"  @refresh="getTableData()" />
                </el-col>
            </el-row>
		</div>
		<!-- <div  class="table-admin-container  layout-padding"  style="width: 400px; float: left; height: 96%;  top: 50px; ">-->
			
		
	</div>
</template>

<script setup lang="ts" name="cgjudgeLists">
import { defineAsyncComponent, reactive, ref, onMounted } from 'vue';
import { ElMessage } from 'element-plus';
import { getList,getListAll,del,batDel,change } from '/@/api/cgjudge/index';
import * as echarts from 'echarts';
import axios from 'axios';
import { handleTree } from '/@/utils';
import chinaMap from "../../assets/100000_full.json";

// 引入组件
const List = defineAsyncComponent(() => import('/@/views/cogen/cgjudge/List.vue'));
const Menu = defineAsyncComponent(() => import('/@/views/cogen/cgjudge/Menu.vue'));
const Table = defineAsyncComponent(() => import('/@/components/table/index.vue'));
const TableSearch = defineAsyncComponent(() => import('/@/components/table/search.vue'));
const EditDialog = defineAsyncComponent(() => import('/@/views/cogen/cgjudge/form/edit.vue'));
// 定义变量内容
const tableRef = ref<RefType>();
const registerRef = ref();
const value = ref(4)
const listRef = ref();
const editRef = ref();
const quRef = ref();
const mapRef = ref();
const state = reactive<TableDemoState>({
	tableData: {
		// 列表数据（必传）
		data: [
            {'name':'深圳勇艺达机器人有限公司','court':'人工智能','duties':'136594852765','phone':'90分','dutyTime':'张东风','touzi':'兴发集团，万华化学'},
            {'name':'深圳勇艺达机器人有限公司','court':'人工智能','duties':'136594852765','phone':'90分','dutyTime':'张东风','touzi':'兴发集团，万华化学'},
            {'name':'深圳勇艺达机器人有限公司','court':'人工智能','duties':'136594852765','phone':'90分','dutyTime':'张东风','touzi':'兴发集团，万华化学'},
            {'name':'深圳勇艺达机器人有限公司','court':'人工智能','duties':'136594852765','phone':'90分','dutyTime':'张东风','touzi':'兴发集团，万华化学'},
            {'name':'深圳勇艺达机器人有限公司','court':'人工智能','duties':'136594852765','phone':'90分','dutyTime':'张东风','touzi':'兴发集团，万华化学'},
            {'name':'深圳勇艺达机器人有限公司','court':'人工智能','duties':'136594852765','phone':'90分','dutyTime':'张东风','touzi':'兴发集团，万华化学'},
            {'name':'深圳勇艺达机器人有限公司','court':'人工智能','duties':'136594852765','phone':'90分','dutyTime':'张东风','touzi':'兴发集团，万华化学'},
            {'name':'深圳勇艺达机器人有限公司','court':'人工智能','duties':'136594852765','phone':'90分','dutyTime':'张东风','touzi':'兴发集团，万华化学'},
            {'name':'深圳勇艺达机器人有限公司','court':'人工智能','duties':'136594852765','phone':'90分','dutyTime':'张东风','touzi':'兴发集团，万华化学'},
            {'name':'深圳勇艺达机器人有限公司','court':'人工智能','duties':'136594852765','phone':'90分','dutyTime':'张东风','touzi':'兴发集团，万华化学'},
            {'name':'深圳勇艺达机器人有限公司','court':'人工智能','duties':'136594852765','phone':'90分','dutyTime':'张东风','touzi':'兴发集团，万华化学'},
            {'name':'深圳勇艺达机器人有限公司','court':'人工智能','duties':'136594852765','phone':'90分','dutyTime':'张东风','touzi':'兴发集团，万华化学'},
            {'name':'深圳勇艺达机器人有限公司','court':'人工智能','duties':'136594852765','phone':'90分','dutyTime':'张东风','touzi':'兴发集团，万华化学'},
        ],
		// 表头内容（必传，注意格式）
		header: [
        { key: 'name', colWidth: '300', title: '企业名称', type: 'text', isCheck: true },
        { key: 'court', colWidth: '180', title: '所属产业', type: 'text', isCheck: true },
        { key: 'dutyTime', colWidth: '280', title: '联系人', type: 'text', isCheck: true },
        { key: 'duties', colWidth: '180', title: '联系电话', type: 'text', isCheck: true },
        { key: 'phone', colWidth: '180', title: '评分', type: 'text', isCheck: true },
    ],
		// 配置项（必传）
		config: {
			total: 50, // 列表总数
			loading: false, // loading 加载
			isButton: true,
			isBorder: false, // 是否显示表格边框
			isSerialNo: true, // 是否显示表格序号
			isSelection: true, // 是否显示表格多选
			isOperate: true, // 是否显示表格操作栏
			isOperate: true, // 是否显示表格操作栏
            isCollect: 'admin:chain:invest',
            isExport: 'admin:chain:invest',
            isSee: 'admin:chain:invest',
		},
		// 搜索表单，动态生成（传空数组时，将不显示搜索，注意格式）
		search: [
        { label: '地区', prop: 'name', placeholder: '请输入地区', required: false, type: 'input' },
        { label: '行业', prop: 'court', placeholder: '请输入行业', required: false, type: 'input' },
        { label: '关键词', prop: 'court', placeholder: '请输入关键词', required: false, type: 'input' },
    ],
		// 搜索参数（不用传，用于分页、搜索时传给后台的值，`getTableData` 中使用）
		param:  {
            page: 1,
            psize: 10,
        },
		//显示分页
		showpage:1,
		// 打印标题
		printName: '数据打印',
		//列字典
		dictData:{
        },
	},
	
});

// // 初始化列表数据
// const getTableData =  () => {
// 	state.tableData.config.loading = true;
// 	state.tableData.data = [];
// 	getList(state.tableData.param).then((response: any) => {
// 		state.tableData.data = response.data.data;
// 		state.tableData.config.total = response.data.total;
// 		state.tableData.config.loading = false;
// 	});
// };

// 搜索点击时表单回调
const onSearch = (data: EmptyObjectType) => {
	state.tableData.param = Object.assign({}, state.tableData.param, { ...data });
	tableRef.value.pageReset();
};
// 删除当前项回调
const onTableDelRow = (row: EmptyObjectType) => {
	return del(row.id).then(() => {
		getTableData();
		ElMessage.success(`删除法官${row.name}成功！`);
	});
};
const onTableBatchDel = (ids: string) => {
	return batDel(ids).then(() => {
		getTableData();
		ElMessage.success(`批量删除成功！`);
	});
	console.log(ids)
};
// 分页改变时回调
const onTablePageChange = (page: TableDemoPageType) => {
	state.tableData.param.page = page.page;
	state.tableData.param.psize = page.psize;
	getTableData();
};
// 拖动显示列排序回调
const onSortHeader = (data: TableHeaderType[]) => {
	state.tableData.header = data;
};

/** 新增按钮操作 */
const onTableAddRow = () => {
	editRef.value.openDialog('add');
};
/** 修改按钮操作 */
const onTableUpdateRow = (row: any) => {
	editRef.value.openDialog('edit',row);
};


</script>

<style scoped lang="scss">
.menu {
	width: 100%;
	height: 50px;
	background-color: #ffffff;
	li {
		list-style: none;
		float: left;
		width: 6.1%;
		font-size: 16px;
		line-height: 50px;
		text-align: center;
	}
}
.table-admin-container {
	.table-admin-padding {
		padding: 15px;
		.table-admin {
			flex: 1;
			overflow: hidden;
		}
	}
}
.cl {
	clear: both;
}
</style>
